<template>
	<view class="pdf">
		<!-- 头部 -->
		<view class="header f ai-c jc-s-b">
			<view class="f ai-c">
				<image src="../../static/menu.png" class="menu"></image>
				<image src="../../static/collect-black.png" class="collect"></image>
				<view class="page">
					<u--input
					    border="surround"
						fontSize="12"
						inputAlign="center"
					    v-model="page"
					    @change="change"
					  ></u--input>				  
				</view>
				<view>/24</view>
			</view>
			<view class=" f ai-c">
				<view class="add"><u-icon name="minus" color="#000000" size="12" bold></u-icon></view>
				<view><u-icon name="plus" color="#000000" size="12" bold></u-icon></view>
			</view>
			<view class="f ai-c">
				<image src="../../static/top-up.png" class="top-up"></image>
				<view class="btn"><u-button type="primary" text="打印" size="mini" @click="handlePrint"></u-button></view>
				<view class="btn"><u-button type="primary" text="下载" size="mini" @click="handleDownload"></u-button></view>
			</view>
		</view>
		<!-- 投诉 -->
		<view class="complaint-box f fd-c ai-c" @click="handleComplaint">
			<image src="../../static/complaint.png"></image>
			<view>投诉</view>
		</view>
		<!-- 所属合集 -->
		<view class="compilation-box f fd-c ai-c" @click="handleCollection">
			<image src="../../static/compilation.png" ></image>
			<view>所属合集</view>
		</view>
		<!-- 投诉弹框 -->
		<ComplaintModel ref="complaintModel"/>
		
	</view>
</template>

<script>
	
	import ComplaintModel from './ComplaintModel.vue'
	export default {
		components:{
			ComplaintModel
		},
		data() {
			return {
				page:1,
				id:null
			}
		},
		onLoad(options) {
			this.id=options.id
		},
		methods: {
			// 下载
			handleDownload(){
				uni.navigateTo({
					url:'/pages/download/download'
				})
			},
			//打印
			handlePrint(){
				uni.navigateTo({
					url:'/pages/pdf/printMaterial'
				})
			},
			handleCollection(){
				uni.navigateTo({
					url:`/pages/pdf/belongCollection?id=${this.id}`
				})
			},
			//投诉
			handleComplaint(){
				this.$refs.complaintModel.setPopup(this.id);
			}
		}
	}
</script>

<style scoped lang="scss">
	.pdf{
		.compilation-box{
			position: fixed;
			right: 22rpx;
			bottom: 180rpx;		
			image{
				width: 50rpx;
				height: 50rpx;
			}
			view{
				width: 100rpx;
				height: 35rpx;
				background: #a28edb;
				font-size: 22rpx;
				color: #fff;
				border-radius: 25rpx;
				text-align: center;
				line-height: 35rpx;
				font-weight: 600;
			}
		}
		.complaint-box{
			position: fixed;
			right: 32rpx;
			bottom: 300rpx;
			image{
				width: 60rpx;
				height: 60rpx;
			}
			view{
				width: 80rpx;
				height: 35rpx;
				background: #fff1dc;
				font-size: 22rpx;
				color: #ff7e3e;
				border-radius: 25rpx;
				text-align: center;
				line-height: 35rpx;
				font-weight: 600;
			}
		}
		.header{
			position: fixed;
			width: 100%;
			height: 80rpx;
			background: #fff;
			left: 0;
			top: 0;
			padding: 0 24rpx;
			box-sizing: border-box;
			box-shadow: 0 0 20rpx #efefef;
			font-size: 24rpx;
			.btn{
				width: 80rpx;
				margin-left: 26rpx;
			}
			.top-up{
				width: 30rpx;
				height: 30rpx;
			}
			.add{
				margin-right: 24rpx;
			}
			.menu{
				width: 30rpx;
				height: 30rpx;
			}
			.collect{
				width: 30rpx;
				height: 30rpx;
				margin-left: 24rpx;
			}
			.page{
				width: 80rpx;
				height: 60rpx;
				margin-left: 16rpx;
				margin-right: 8rpx;
				position: relative;
				top: 5rpx;
				
				/deep/ .u-input{
					padding: 0!important;
				}
				
			}
			
		}
	}

</style>
